<template>
  <div class="filter-page">
    <div class="filter-item">
      <div class="filter-title">价格范围</div>
      <div class="filter-content"><input type="number" v-model="minPrice" placeholder="最低价格">
        <input type="number" v-model="maxPrice" placeholder="最高价格">
      </div>
    </div>
    <div class="filter-item">
      <div class="filter-title">商品分类</div>
      <div class="filter-content"><select v-model="category">
        <option value="">全部分类</option>
        <option value="clothing">服装</option>
        <option value="electronics">电子产品</option>
        <option value="beauty">美妆</option>
      </select></div>
    </div>
    <div class="filter-item">
      <div class="filter-title">排序方式</div>
      <div class="filter-content"><select v-model="sort">
        <option value="priceAsc">价格升序</option>
        <option value="priceDesc">价格降序</option>
        <option value="salesDesc">销量降序</option>
      </select></div>
    </div>
    <div class="filter-btns">
      <button @click="resetFilters">重置</button>
      <button @click="applyFilters">筛选</button>
    </div>
  </div>
</template>
<script>export default {
  data() {
    return {minPrice: null, maxPrice: null, category: "", sort: "priceAsc"};
  }, methods: {
    resetFilters() {
      this.minPrice = null;
      this.maxPrice = null;
      this.category = "";
      this.sort = "priceAsc";
    }, applyFilters() {      // 根据筛选条件进行商品列表的数据请求或筛选操作      // ...    }  }};</script>
<style scoped>.filter-page {
  padding: 20px;
}

.filter-item {
  margin-bottom: 20px;
}

.filter-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.filter-content {
  display: flex;
  justify-content: space-between;
}

.filter-btns {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

button {
  padding: 10px 20px;
}</style>